<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="../assets/images/favicon.ico"
    />
    <title>壹脉智能CRM</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet" />
    <link href="./css/perfect-scrollbar.min.css" rel="stylesheet" />
    <link href="css/style.min.css" rel="stylesheet" />
    <link href="css/colors/default.css" id="theme" rel="stylesheet" />
    <link rel="stylesheet" href="css/diy.min.css" />
      <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=phCOHTH7DvxmEotQQn5T4ov82xtA8isT"></script>
  </head>

  <body class="fix-header fix-sidebar card-no-border">
    <div class="preloader">
      <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
      </div>
    </div>
    <div id="main-wrapper">
      <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
          <div class="navbar-header">
            <a class="navbar-brand" href="../index.html">
              <b>
                <img
                  src="../assets/images/diy/yimai.png"
                  alt="homepage"
                  class="dark-logo"
                />
                <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
              </b>
              <span>
                <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
              </span>
            </a>
          </div>
          <div class="navbar-collapse">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a
                  class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"
                  href="javascript:void(0)"
                  ><i class="sl-icon-menu"></i
                ></a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"
                  href="javascript:void(0)"
                  ><i class="sl-icon-menu"></i
                ></a>
              </li>
            </ul>
            <user-head></user-head>
          </div>
        </nav>
      </header>
      <aside class="left-sidebar">
        <div class="scroll-sidebar">
          <company-position></company-position>
          <nav class="sidebar-nav p-0">
            <c-slider current="13"></c-slider>
          </nav>
        </div>
      </aside>
      <div class="page-wrapper">
        <div class="container-fluid">
          <div class="row page-titles">
            <div class="col-md-5 align-self-center">
              <h3 class="text-themecolor">短视频管理</h3>
              <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="javascript:void(0)">HOME</a>
                </li>
                <li  class="breadcrumb-item active">
                  短视频管理
                </li>
              </ol>
            </div>
          </div>
          <!--列表-->
          <div class="row bgfff">
            <div class="d-flex p-t-20 w100p p-r-31 p-b-17">
              <div class="mr-auto d-flex p-l-30 fs14 cfff lh30 align-cen">
                <div class="m-r-21">
                    <el-button @click="showPage" class="btncss">添加视频</el-button>
                </div>
<!--                <div class="m-r-21">-->
<!--                    <el-tooltip content="小程序视频直播审核开关,发布新版本时需要关闭" placement="top">-->
<!--                        <el-switch @change="switchVideoClick"-->
<!--                                   v-model="switchVideo"-->
<!--                                   active-text="打开"-->
<!--                                   inactive-text="关闭">-->
<!--                        </el-switch>-->
<!--                    </el-tooltip>-->
<!--                </div>-->
              </div>
              <div class="ml-auto d-flex align-cen">
<!--                 <span-->
<!--                         class="bgblue p-l-20 p-r-19 bradius4 m-r-10 cfff fs14 lh30"-->
<!--                         @click="searchPage"-->
<!--                 >刷新</span>-->
              </div>
            </div>
            <div class="row w100p p-l-30">

              <el-row style="overflow-x:auto;width: 100%;display:block;">
                <el-table border align="center"  highlight-current-row
                          :data="tableData"
                          style="overflow-x:auto;width: 100%;display:block;" >
                  <el-table-column align="center" type="index" width="50" label="序号"> </el-table-column>
                  <el-table-column align="center" prop="userName" label="上传者" > </el-table-column>
                  <el-table-column align="center" prop="uploadTime"  width="160" label="上传时间" > </el-table-column>
                  <el-table-column align="center" prop="playVolume" label="播放量pv" width="80"> </el-table-column>
                  <el-table-column align="center" prop="guestsNum" label="获客人数" width="80"> </el-table-column>
                  <el-table-column align="center" prop="likesNum" label="点赞" width="60"> </el-table-column>
                  <el-table-column align="center" prop="forwardNum" label="转发次数" width="80"> </el-table-column>
                  <el-table-column align="center" prop="forwardNum" label="关注人数" width="80"> </el-table-column>
                  <el-table-column align="center" prop="title" label="标题" width="80"> </el-table-column>
                  <el-table-column align="center" prop="address" label="地址" width="200"> </el-table-column>
<!--                  <el-table-column align="center" prop="coverImg" label="封面">-->
<!--                    <template slot-scope="scope">-->
<!--                      <el-image-->
<!--                              style="width: 60px; height: 60px"-->
<!--                              :src="scope.row.coverImg"-->
<!--                              fit="contain"></el-image>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                  <el-table-column align="center" prop="stateText" label="状态"> </el-table-column>

                  <el-table-column align="center" fixed="right" label="操作"  width="170">
                    <template slot-scope="scope">
                      <el-button type="text" @click="detail(scope.row,1)" size="small">
                        详情
                      </el-button>
                      <el-button type="text" @click="editVideo(scope.row,2)" size="small">
                        编辑
                      </el-button>
                      <el-button type="text"  @click="delDynamicInfo(scope.row.videoId)" size="small">
                        删除
                      </el-button>
                      <el-button type="text"  @click="updateData(scope.row)" size="small">
                        {{scope.row.state == 0 ? "上架" : "下架"}}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
              <el-row  style="margin-top:10px;">
                <el-pagination
                        layout="total, sizes, prev, pager, next"
                        :current-page="current"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        :total="totalCount"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
              </el-row>
            </div>
          </div>
        </div>

      </div>

      <el-dialog title="添加视频" @open="openDialog" :modal-append-to-body="false" :append-to-body="true" :modal="false" :rules="rules" ref="form" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="视频标题" id="videoTitle"  prop="name" :label-width="formLabelWidth">
            <el-input v-model="form.title" ></el-input>
          </el-form-item>
          <el-form-item label="添加位置"  :label-width="formLabelWidth">
              <el-input  id="suggestId" v-model="form.address" ></el-input>
              <div id="baidumap"></div>
<!--              <div id="r-result">请输入:<input type="text"  size="20" value="百度" style="width:150px;" /></div>-->
              <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;z-index: 999999;position: fixed;"></div>
          </el-form-item>


<!--          <el-form-item label="视频封面" :label-width="formLabelWidth">-->
<!--            <el-upload-->
<!--                    class="avatar-uploader"-->
<!--                    :action="uploadUrl"-->
<!--                    :show-file-list="false"-->
<!--                    :on-success="handleAvatarSuccess"-->
<!--                    :before-upload="beforeAvatarUpload">-->
<!--              <img v-if="form.coverImg" :src="form.coverImg" class="avatar">-->
<!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--            </el-upload>-->
<!--          </el-form-item>-->

          <el-form-item label="视频内容" :label-width="formLabelWidth">
            <el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessVideo"
                    :before-upload="beforeAvatarUploadVideo">
                <video v-if="form.url" :src="form.url" width="178" height="178" controls>
                    <source src="movie.mp4" type="video/mp4">
                </video>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">只能上传MP4文件，且不超过4M</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-if="form.type != 1" class="btncss" @click="addVideo('form')" >发 布</el-button>
        </div>
      </el-dialog>

        <el-dialog title="视频详情" :rules="rules" ref="form" :visible.sync="dialogDetailVisible">
            <el-form :model="form">
                <el-form-item label="视频标题"  prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.title" ></el-input>
                </el-form-item>
                <el-form-item label="添加位置" :label-width="formLabelWidth">
                    <el-input v-model="form.address" ></el-input>
                </el-form-item>
                <el-form-item label="上传时间"  prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.uploadTime" ></el-input>
                </el-form-item>
                <el-form-item label="播放量"  prop="name" :label-width="formLabelWidth">
                    <el-input disabled="true" v-model="form.playVolume" ></el-input>
                </el-form-item>
                <el-form-item label="获客人数"  prop="name" :label-width="formLabelWidth">
                    <el-input disabled="true" v-model="form.guestsNum" ></el-input>
                </el-form-item>

                <el-form-item label="点赞"  prop="name" :label-width="formLabelWidth">
                    <el-input disabled="true" v-model="form.likesNum" ></el-input>
                </el-form-item>
                <el-form-item label="转发"  prop="name" :label-width="formLabelWidth">
                    <el-input disabled="true" v-model="form.forwardNum" ></el-input>
                </el-form-item>

<!--                <el-form-item label="视频封面" :label-width="formLabelWidth">-->
<!--                    <el-upload-->
<!--                            class="avatar-uploader"-->
<!--                            :action="uploadUrl"-->
<!--                            :show-file-list="false"-->
<!--                            :on-success="handleAvatarSuccess"-->
<!--                            :before-upload="beforeAvatarUpload">-->
<!--                        <img v-if="form.coverImg" :src="form.coverImg" class="avatar">-->
<!--                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                    </el-upload>-->
<!--                </el-form-item>-->

                <el-form-item label="视频内容" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessVideo"
                            :before-upload="beforeAvatarUploadVideo">
                        <video v-if="form.url" :src="form.url" width="178" height="178" controls>
                            <source src="movie.mp4" type="video/mp4">
                        </video>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogDetailVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap popper Core JavaScript -->
    <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/perfect-scrollbar.jquery.min.js"></script>
    <script src="js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="js/custom.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vuejs-datepicker.min.js"></script>
    <script src="js/zh.js"></script>
    <script src="js/config.js"></script><script src="js/extend.js"></script>
    <script>
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }
      $(function() {
        let formatDate = Vue.filter('formatDate');
        var vw = new Vue({
          el: '#main-wrapper',
          components: { vuejsDatepicker },
          // components:{header},
          data: {
            rules:{},
            dialogFormVisible:false,
            dialogDetailVisible:false,
            form:{
              videoId:'',
              title:'',
              address:'',
              coverImg:'1',
              url:'',
              link:'',
              type:3
            },
            uploadUrl: $.uploadUrl,
            formLabelWidth: '120px',
            options:[],
            imageUrl:'',
            // 总数
            totalCount : 0,
            current: 1 ,
            pageSize:10,
            tableData: [],
            //短视频开关
            switchVideo:false
          },
          mounted() {
              // 请在此地方调用
              this.$nextTick(() => {
                  // this.BMap();
              });
              this.searchPage();
          },
          methods: {

              switchVideoClick(value){
                  const data = {
                      data : {switchVideo:value}
                  }
                  $.cAjax('/crmPc/shortVideo/switchVideo',data).then(data => {
                      layer.msg('操作成功');
                  }).catch(function (err) {
                  });
              },
              openDialog(){
                  var map = new BMap.Map("baidumap");
                  var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                      {"input" : "suggestId"
                          ,"location" : map
                      });
              },
              handleAvatarSuccess(res, file) {
                  this.form.coverImg = $.baseFileUrl +"/"+ res.data;
              },
            beforeAvatarUpload(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传视频图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
              handleAvatarSuccessVideo(res, file) {
                  this.form.url = $.baseFileUrl +"/"+ res.data;
              },
              beforeAvatarUploadVideo(file){
                  const isLt2M = file.size / 1024 / 1024 < 4;
                  if (!isLt2M) {
                      this.$message.error('上传视频大小不能超过 4MB!');
                  }
                  return isLt2M;
              },
              showPage(){
                  this.form =  {
                         videoId:'',
                          title:'',
                          address:'',
                          coverImg:'1',
                          url:'',
                          link:'',
                          type:3
                         };
                  this.dialogFormVisible = true
              },
            addVideo(){
                const setting = {
                    data : this.form
                }
                setting.data.address = $("#suggestId").val();
                if(this.form.type == 3){
                    //新增
                    $.cAjax('/crmPc/shortVideo/add',setting).then(data => {
                        layer.msg('操作成功');
                        this.searchPage();
                    }).catch(function (err) {
                    });
                }else if(this.form.type == 2){
                    $.cAjax('/crmPc/shortVideo/update',setting).then(data => {
                        layer.msg('操作成功');
                        this.searchPage();
                    }).catch(function (err) {
                    });
                }
                this.dialogFormVisible = false;
            },
            handleSizeChange(pageSize) {
              this.pageSize = pageSize
              this.searchPage();
            },
            handleCurrentChange(currentPage) {
              this.currentPage = currentPage
              this.searchPage();
            },
            searchPage(){
              const setting = {
                data : {
                  pageSize : this.pageSize,
                  pageNum : this.pageNum,
                }
              }
              $.cAjax('/crmPc/shortVideo/queryPage',setting).then(data => {
                if(data){
                  this.tableData = data.list;
                  this.tableData.forEach(item=>{
                    // item.url =  $.baseFileUrl +"/"+ item.url;
                    // item.coverImg =  $.baseFileUrl +"/"+ item.coverImg;
                    item.stateText = item.state === 0 ? "已下架" : "已上架"
                  })
                  this.totalCount = data.total;
                }
              }).catch(function (err) {
              });
            },
            updateData(row) {
              const msg = row.state == 0 ? "上架" : "下架";
              layer.confirm(
                '确定要'+msg+'这个视频吗？',
                {
                  skin: 'confirm-class',
                  btn: ['取消', '确定']
                },
                i => {
                  layer.close(i);
                },
                () => {
                  const updateData = 'updateData';
                  $.cAjax('/crmPc/shortVideo/' + updateData, {
                    data: {
                      videoId: row.videoId,
                      state : row.state === 0 ?  1 : 0
                    }
                  }).then(res => {
                    layer.msg('操作成功');
                    this.searchPage();
                  });
                  return false;
                }
              );
            },
            delDynamicInfo(videoId) {
              layer.confirm(
                '确定要删除这篇文章吗？',
                {
                  skin: 'confirm-class',
                  btn: ['取消', '确定']
                },
                i => {
                  layer.close(i);
                },
                () => {
                  $.cAjax('/crmPc/shortVideo/deleteById', {
                    data: {
                      videoId: videoId
                    }
                  }).then(res => {
                    layer.msg('删除成功');
                    this.searchPage();
                  });
                  return false;
                }
              );
            },
            //查看文章详情
            detail(row) {
              this.form = row;
              this.form.type = 1;
              this.dialogDetailVisible = true;
            },
            editVideo(row,type){
              this.form = row;
              this.form.type = 2;
              $("#suggestId").val(this.form.address);
              $("#suggestId").focus();
              this.dialogFormVisible = true;

            }
          }
        });
      });
    </script>
  </body>
  <!-- 引入组件库 -->
<!--  <script src="element-ui/lib/index.js"></script>-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <style type="text/css">
    .btncss{
      background-color: #51CDCB;
      border: 1px #51CDCB solid;
      color: white;
      margin-left: 20px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 78px;
        height: 78px;
        line-height: 78px;
        text-align: center;
    }
    .avatar {
        width: 78px;
        height: 78px;
        display: block;
    }
      .el-dialog__wrapper{
          z-index: 0;
      }
      .tangram-suggestion-main{
          z-index: 9999999;
      }
    .el-table th.is-center{
        text-align: -webkit-center;
    }
  </style>


</html>
